<template>
  <!--投标管理-->
  <div class="tender-tender-list">
    <!--搜索区域-->
    <div class="btns">
      <el-select v-model="searchForm.projectId" style="margin-right: 6px" filterable clearable placeholder="请选择项目" value-key="name">
        <el-option v-for="item in projects" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="searchForm.liablePerson" placeholder="责任人"/>
      <el-button type="primary" icon="el-icon-search" size="small" @click="toSearch">查询</el-button>
    </div>
    <!--表格区域-->
    <el-card shadow="never">
      <div class="btns" style="padding: 0 0 8px 0">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
      </div>
      <a-alert type="info" style="margin-bottom: 12px">
        <span style="margin-left: 1em" slot="message">
          已选择<span style="margin-left: 6px;color: #1890ff">{{biddingTable.selectedRowKeys.length}}</span>项
          <a @click="()=>{biddingTable.selectedRowKeys=[];tendererTable.dataSource=[]}"
             style="margin-left: 1em;color: #1890ff;display: inline-block">清空</a>
        </span>
      </a-alert>
      <a-table
        size="small"
        bordered
        ref="biddingTable"
        :rowKey="record => record.id"
        :loading="biddingTable.loading"
        :data-source="biddingTable.dataSource"
        :pagination="pagination"
        :columns="biddingTable.columns"
        :scroll="{ x: 1300 }"
        :rowSelection="{
          selectedRowKeys: biddingTable.selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <template slot="projectId" slot-scope="text">{{getProjectName(text)}}</template>
        <template slot="endTime" slot-scope="text">{{dateTimeFormat(text)}}</template>
        <template slot="createTime" slot-scope="text">{{dateTimeFormat(text)}}</template>
        <template slot="updateTime" slot-scope="text">{{dateTimeFormat(text)}}</template>
        <template slot="createBy" slot-scope="text">{{users[text]?users[text]:''}}</template>
        <template slot="updateBy" slot-scope="text">{{users[text]?users[text]:''}}</template>

        <template slot="tenderOpenFile" slot-scope="text">
          <el-tag effect="plain" type="primary">
            <a style="display: block" class="ellipsis" :href="text" target="_blank">{{text?(text.split('/'))[text.split('/').length-1]:null}}</a>
          </el-tag>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="link" size="small" @click="handleOpen(record)">详情</a-button>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a-button style="color: #909399" type="link" size="small">更多<a-icon type="down"/></a-button>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a style="color: #ff4949">删除</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a style="color: #1890ff" @click="handleTenderer(record)">参标信息</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </a-table>
    </el-card>
    <!--新增/修改模态框-->
    <el-dialog v-el-drag-dialog :visible.sync="dialog.visible" :title="dialog.title">
      <el-form v-model="dialog.form" :rules="rules" status-icon>
        <el-form-item label="项目" label-width="80px" prop="projectId">
          <el-select v-model="dialog.form.projectId" filterable clearable placeholder="请选择项目" value-key="name">
            <el-option v-for="item in projects" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :sm="24" :lg="12">
            <el-form-item label="责任人" label-width="80px" prop="liablePerson">
              <el-input v-model="dialog.form.liablePerson" autocomplete="off" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :lg="12">
            <el-form-item label="截至时间" label-width="80px" prop="endTime">
              <el-date-picker type="datetime" value-format="timestamp" v-model="dialog.form.endTime" size="small"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :sm="24" :lg="12">
            <el-form-item label="开标信息" label-width="80px" prop="tenderOpenContent">
              <el-input v-model="dialog.form.tenderOpenContent" autocomplete="off" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :lg="12">
            <el-form-item label="中标人" label-width="80px" prop="tenderWinner">
              <el-input v-model="dialog.form.tenderWinner" autocomplete="off" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>开标信息文件</el-divider>
        <common-upload :url="urls.fileUpload" v-model="fileList" :maxNum="fileNum" :multiple="false" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="dialog.submitLoading" size="small" @click="dialogSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import "@/styles/auto-style.css"
  import { getAction, postActionByQueryString, postActionByJson } from "@/api/manage"
  import { dateTimeFormat, dateFormat } from '@/utils/format'
  import elDragDialog from '@/directive/el-drag-dialog'
  import CommonUpload from '@/components/Upload/CommonUpload'

  export default {
    directives: { elDragDialog },
    components: {
      CommonUpload
    },
    data() {
      const fileUploadUrl = process.env.VUE_APP_BASE_API + 'file/uploadCache'
      const fileNum = 1
      return {
        searchForm: {},
        projects: [],

        biddingTable: {
          dataSource: [],
          loading: false,
          selectedRowKeys: [],
        },
        pagination: {
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          current: 1,
          pageSize: 10,
          total: 0,
          onChange: (item) => {
            this.pagination.current = item
            this.toSearch()
          },
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          onShowSizeChange: (current, pageSize) => {
            this.pagination.pageSize = pageSize
          },
        },

        dialog: {
          visible: false,
          form: {},
          title: null,
          submitLoading: false
        },

        rules: {
          projectId: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
        },

        fileList: [],
        fileNum,
        users: {},

        urls: {
          fileUpload: fileUploadUrl,
          findAllIdToName: '/user/findAllIdToName',
          findByAllProject: '/project/detail/findByAll',
          selectByParams: '/tender/bidding/selectByParams',
        },
      }
    },
    created() {
      this.loadProjects()
      this.loadUserName()
    },
    methods: {
      onSelectChange(selectedRowKeys){

      },
      handleTenderer() {
      },
      dialogSubmit() {
      },
      handleDelete(id){
      },
      handleEdit(record) {
      },
      handleAdd() {
      },
      loadProjects() {
        getAction(this.urls.findByAllProject).then(resp => {
          this.projects = resp.data
        })
      },
      toSearch() {
        getAction(this.urls.selectByParams, {
          projectId: this.searchForm.projectId,
          liablePerson: this.searchForm.liablePerson,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
        }).then(resp => {
          setTimeout(()=>{
            this.biddingTable.loading = false
          }, 150)
          this.biddingTable.dataSource = resp.data.records
          this.pagination.current = resp.data.current
          this.pagination.pageSize = resp.data.pageSize
          this.pagination.total = resp.data.total
        }).catch(()=> {
          this.biddingTable.loading = false
        })
      },
      getProjectName(id) {
        var arr = this.projects.filter(item => item.id==id?true:false)
        return arr.length>0?arr[0].name:''
      },
      loadUserName() {
        getAction(this.urls.findAllIdToName, {}).then(resp=>{
          this.users = resp.data
        })
      },
      dateTimeFormat,
      dateFormat
    }
  }
</script>

<style lang="scss" scoped>
  .tender-tender-list {
    /deep/.el-form-item__content{
      height:auto;
      line-height:32px;
      margin-left:90px!important
    }
    .ellipsis {
      overflow: hidden!important;
      white-space: nowrap!important;
      text-overflow: ellipsis!important;
      font-size: 13px;
      max-width: 100px;
    }
  }
</style>
